<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Lesson管理系统</title>
    <link rel="stylesheet" href="../../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/css/bootstrap.min.css">

    <link rel="stylesheet" href="../../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/font/bootstrap-icons.min.css">
    <!--user.css(美化)-->
    <link rel="stylesheet" href="../../style/user.css">
    <link rel="stylesheet" href="../../style/global.css">
</head>
<body class="bg-dark">
<!--页头-->
<header >

    <!--批量删除按钮: 类型, 点击事件, 样式[按钮基础 小号 红色 右浮 上下外边距 左右外边距]-->
    <button type="button" onclick="batchDelete()"
            class="btn btn-sm btn-outline-danger float-right my-2 mx-1">
        <i class="bi bi-file-minus-fill"></i> 批量删除
    </button>

    <!--图形数据按钮: 类型, 点击事件, 样式[按钮基础 小号 深蓝 右浮 上下外边距 左右外边距]-->
    <button type="button" onclick="excel()"
            class="btn btn-sm btn-outline-primary float-right my-2 mx-1">
        <i class="bi bi-file-spreadsheet-fill"></i> 导出数据
    </button>

    <!--图形数据按钮: 类型, 点击事件, 样式[按钮基础 小号 绿色 右浮 上下外边距 左右外边距]-->
    <a href="user-insert.html"
       class="btn btn-sm btn-outline-success float-right my-2 mx-1">
        <i class="bi bi-file-plus-fill"></i> 添加用户
    </a>

    <!--路径导航: 样式[面包屑 背景色 下外边距]-->
    <ol class="breadcrumb bg-dark mb-0">
        <!--导航项: 样式[面包屑项 当前选中]-->
        <li class="breadcrumb-item active">用户管理</li>
    </ol>
</header>

<!--数据区: 样式[表格基础 深色 条纹 边框 经过高亮 小号]-->
<table class="table table-dark table-striped table-bordered table-hover table-sm">
    <thead>
    <tr>
        <th><label>
            <input type="checkbox">
        </label></th>
        <th>序号</th>
        <th>用户账号</th>
        <th>用户昵称</th>
        <th>性别</th>
        <th>年龄</th>
        <th>真实姓名</th>
        <th>身份证号</th>
        <th>手机号码</th>
        <th></th>
    </tr>
    </thead>
    <tbody id="userTbody"></tbody>
</table>

<!--分页区: ID, 样式[分页 小号 居中 固定在底端]-->
<ul id="pageUl" class="pagination pagination-sm justify-content-center fixed-bottom">
</ul>

<!--详细信息模态框: ID, 样式[模态框], 键盘可控制-->
<section id="userDetailModal" class="modal" tabindex="-1">
    <article class="modal-dialog">
        <article class="modal-content">
            <!--模态框头: 样式[模态框头 背景色]-->
            <header class="modal-header bg-light">
                <!--模态框标题: 样式[模态框标题]-->
                <h5 class="modal-title">用户详细信息</h5>
                <!--关闭按钮: 类别, 样式[关闭按钮], 关闭功能-->
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </header>
            <!--模态框体: 样式[模态框体]-->
            <article class="modal-body">
                <!--条目: 样式[下边框 下内边距]-->
                <h5 class="border-bottom pb-1">用户账号 <small class="text-muted float-right" id="usernameMsg"></small></h5>
                <h5 class="border-bottom pb-1">用户昵称 <small class="text-muted float-right" id="nickNameMsg"></small></h5>
                <h5 class="border-bottom pb-1">用户性别 <small class="text-muted float-right" id="genderMsg"></small></h5>
                <h5 class="border-bottom pb-1">用户年龄 <small class="text-muted float-right" id="ageMsg"></small></h5>
                <h5 class="border-bottom pb-1">真实姓名 <small class="text-muted float-right" id="realNameMsg"></small></h5>
                <h5 class="border-bottom pb-1">身份证号 <small class="text-muted float-right" id="idCardMsg"></small></h5>
                <h5 class="border-bottom pb-1">手机号码 <small class="text-muted float-right" id="phoneMsg"></small></h5>
                <h5 class="border-bottom pb-1">用户头像 <small class="text-muted float-right" id="avatarUrlMsg"></small>
                </h5>
                <h5 class="border-bottom pb-1">创建时间 <small class="text-muted float-right" id="createTimeMsg"></small>
                </h5>
                <h5 class="border-bottom pb-1">修改时间 <small class="text-muted float-right" id="modifyTimeMsg"></small>
                </h5>
                <h5 class="border-bottom pb-1">用户信息 <small class="text-muted float-right" id="userInfoMsg"></small></h5>
            </article>
        </article>
    </article>
</section>

<!--用户头像模态框: ID, 样式[模态框], 键盘可控制-->
<section id="userAvatarModal" class="modal" tabindex="-1">
    <article class="modal-dialog">
        <article class="modal-content">
            <!--模态框头: 样式[模态框头 背景色]-->
            <header class="modal-header bg-light">
                <!--模态框标题: 样式[模态框标题]-->
                <h5 class="modal-title">修改用户头像</h5>
                <!--关闭按钮: 类别, 样式[关闭按钮], 关闭功能-->
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </header>
            <!--模态框体: 样式[模态框体 背景色]-->
            <article class="modal-body bg-dark">
                <!--头像: ID, 宽度, 高度, 提示, 地址, 样式[缩略图]-->
                <img id="avatarImg"  alt="sorry" src="" class="img-thumbnail"/>
                <!--上传控件: 样式[自定义文件 上下外边距]-->
                <div class="custom-file my-1">
                    <!--文件框: ID, 类型, 样式[自定义文件框]-->
                    <input id="avatarIpt" type="file" class="custom-file-input">
                    <!--文件框Label: ID, 关联ID, 样式[自定义文件框Label]-->
                    <label id="avatarLabel" for="avatarIpt" class="custom-file-label">重新选择一张头像</label>
                </div>
                <!--上传按钮: ID, 类型, 样式[按钮基础 背景色 区块]-->
                <button id="uploadAvatarBtn" type="button" class="btn btn-info btn-block">
                    确认上传新头像
                </button>
            </article>
        </article>
    </article>
</section>
<!--核心JS-->
<script src="../../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/jquery-3.6.0.js"></script>
<script src="../../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/js/bootstrap.bundle.min.js"></script>
<script src="../../bootstrap-4.6.2-dist/bootstrap-icons-1.10.5/js/bootstrap.min.js"></script>
<!--user的js-->
<script src="../../script/user.js"></script>
<script src="../../script/global.js"></script>
<!--ajax的JS-->
<script src="../../script/ajax.js"></script>
</body>
</html>
